<!DOCTYPE html>
<html>
	<head>
		<title>D3 Tutorial Test12 Pie Layout</title>
		<script src="d3.min.js"></script>
	</head>
	<body>
	
		<script type="text/javascript">
		
		var data = [10, 50, 80];
		var r = 300;
		
		var color = d3.scale.ordinal()
								.range(["red", "blue", "orange"]);
			
		var canvas = d3.select("body")
						.append("svg")
						.attr("width", 1500) 
						.attr("height", 1500);
		
		var group = canvas.append("g")
							.attr("transform", "translate(300, 300)");
		
		var arc = d3.svg.arc()
							.innerRadius(200) // 0 for pie and >=0 for donut
							.outerRadius(r);
		
		var pie = d3.layout.pie()
							.value(function(d) { return d; } );
		
		var arcs = group.selectAll("arc")
							.data(pie(data))
							.enter()
							.append("g")
							.attr("class", "arc");
		
		arcs.append("path")
				.attr("d", arc)
				.attr("fill", function(d) { return color(d.data); } );
		
		arcs.append("text")
				.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; } )
				.attr("text-anchor", "middle")
				.attr("font-size", "1.5em")
				.attr("fill", "white")
				.text(function(d) { return d.data; });
										
		</script>
	</body>
</html>